<h2>Why is this an issue?</h2>
<p>JSX lets you write HTML-like markup inside a JavaScript file, commonly used in React.</p>
<p>Adding comments inside JSX might be tricky as JSX code is neither a plain HTML nor JavaScript.</p>
<p>HTML comments (<code>&lt;!-- comment here --&gt;</code>) are not valid syntax in JSX.</p>
<p>JavaScript-style comments, single or multiline, will create an additional text node in the browser, which is probably not expected.</p>
<pre>
&lt;div&gt;
  // Noncompliant: text inside node
&lt;/div&gt;
</pre>
<p>To avoid that, use JavaScript multiline comments enclosed in curly braces. Single-line comments can also be used, but avoid having the ending
bracket in the same line.</p>
<pre>
&lt;div&gt;
  {
    /*
      multi-line
      comment
    */
  }
  {
    // single-line comment
  }
  { /* short form comment */ }
&lt;/div&gt;
</pre>
<p>Note that JavaScript comments around attributes are also allowed (<code>&lt;div /* comment */&gt;</code>).</p>
<p>If the additional text node is intentional, prefer using a JavaScript string literal containing that comment.</p>
<pre>
&lt;div&gt;
  { '// text inside node' }
&lt;/div&gt;
</pre>
<h2>Resources</h2>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://github.com/jsx-eslint/eslint-plugin-react">eslint-plugin-react</a> - Rule <a
  href="https://github.com/jsx-eslint/eslint-plugin-react/blob/HEAD/docs/rules/jsx-no-comment-textnodes.md">jsx-no-comment-textnodes</a> </li>
  <li> React Documentation - <a href="https://react.dev/learn/javascript-in-jsx-with-curly-braces">JavaScript in JSX with Curly Braces</a> </li>
</ul>
